<template>
  <div>
    <input type="text" v-model="kw" />
  </div>
</template>

<script>
import { watch, ref } from "@vue/composition-api";

export default {
  setup() {
    const kw = ref("");

    const asyncPrint = val => {
      return setTimeout(() => {
        console.log(val);
      }, 1000);
    };

    const stop = watch(
      kw,
      (cur, prev, clean) => {
        const timerId = asyncPrint(cur);
        clean(()=>clearTimeout(timerId)) // 类似于react的 useEffect的return 每次执行该回调前会执行这个
      },
      {
        lazy: true
      }
    );

    return {
      kw
    };
  }
};
</script>

<style scoped></style>
